<template>
  <div class="progress box clmcenter">
    <p class="progressbar">加载中...{{ percent }}</p>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "LoadingPage",
  data() {
    return {
      count: 0,
      percent: "",
    };
  },
  mounted: function () {
    this.preload();
  },
  methods: {
    getUserStatus() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      //获取用户状态
      this.$http.post("/getUserStatusInfo").then((res) => {
        Toast.clear();
        if (res.data.code == 200) {
          let list = res.data.data;
          if (list.isReg == 0) {
            //未注册
            this.$router.replace("/sign");
          } else {
            //已注册
            if (list.isUploadImg == 1) {
              this.$router.replace({
                name: "index",
                params: { code: list.code, url: list.url },
              });
            } else {
              Toast("请先上传照片哦~");
            }
          }
        } else {
          Toast(res.data.msg);
        }
      });
    },
    preload() {
      let chooseEat = require.context("../assets/img", false, /\.jpg|png|svg|webp$/);
      // 文件夹图片
      let chooseEatList = [];
      // 总数据
      let allList = [];
      for (var i = 0; i < chooseEat.keys().length; i++) {
        chooseEatList.push({
          id: 1,
          img: chooseEat.keys()[i].substr(2, chooseEat.keys()[i].length),
        });
      }
      allList = chooseEatList;
      // 合并数据
      // 根据层级追加目录路径前缀 1chooseEat 2end 3home 4lamp
      this.allList = allList;
      for (var b in allList) {
        var image = new Image();
        if (allList[b].id === 1) {
          image.src = require("../assets/img/" + allList[b].img);
        }
        // 图片加载
        image.onload = () => {
          this.count++;
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor((this.count / this.allList.length) * 100);
          this.percent = `${percentNum}%`;
        };
      }
    },
  },

  watch: {
    count: function (val) {
      //console.log(val);
      if (val === 24) {
        // 图片加载完成后
        // this.getUserStatus();
        this.$router.replace("/index");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.progress {
  height: 100%;
  justify-content: center;
  p {
    font-size: 2rem;
    padding-top: 1rem;
  }
}
</style>
